<template>
    <el-card class="detail_container">
        <template #header>
            <div class="detail_container-card">挂号详情</div>
        </template>
        <div class="detail_container-content">
            <el-tag class="contentTag" type="success" effect="dark">
                <el-icon class="elIcon">
                    <Check />
                </el-icon>
                <span>{{ orderInfo.param?.orderStatusString }}</span>
            </el-tag>
            <div class="contentRight">
                <img src="../../../../../../assets/images/code_app.png" alt="code_app">
                <div class="text">
                    <span>
                        微信
                        <SvgIcon name="wx" width="14" height="14" />
                        关注 “北京114预约挂号”
                    </span>
                    <span>“快速预约挂号”</span>
                </div>
            </div>
        </div>
        <!-- 订单详情底部内容的结构 -->
        <el-row :gutter="16" class="detail_container-bottom">
            <el-col :sm="10" :xs="24">
                <el-descriptions :column="1" :border="true">
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                就诊人信息
                            </div>
                        </template>
                        <span>{{ orderInfo.patientName }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                就诊日期
                            </div>
                        </template>
                        <span>{{ orderInfo.reserveDate }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                就诊医院
                            </div>
                        </template>
                        <span>{{ orderInfo.hosname }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                就诊科室
                            </div>
                        </template>
                        <span>{{ orderInfo.depname }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                医生职称
                            </div>
                        </template>
                        <span>{{ orderInfo.title }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                医生服务费
                            </div>
                        </template>
                        <el-tag type="danger" size="small">
                            <span>{{ orderInfo.amount }}</span>
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                挂号单号
                            </div>
                        </template>
                        <span>{{ orderInfo.outTradeNo }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="center">
                        <template #label>
                            <div class="cell-item">
                                挂号时间
                            </div>
                        </template>
                        <span>{{ orderInfo.createTime }}</span>
                    </el-descriptions-item>
                </el-descriptions>
                <div v-if="orderInfo.orderStatus !== -1">
                    <el-popconfirm @confirm="cancel" title="确认取消预约?">
                        <template #reference>
                            <el-button>取消预约</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button @click="payment" type="primary" v-if="orderInfo.orderStatus === 0">支付</el-button>
                </div>
            </el-col>
            <el-col class="bottomRight" :sm="14" :xs="24">
                <el-card>
                    <template #header>
                        <span class="bottomRight-title">注意事项</span>
                    </template>
                    <p>
                        1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
                    </p>
                    <p style="color: lightcoral">
                        2.【取号】就诊当天需在
                        {{ orderInfo.fetchTime }}
                        在医院取号，未取号视为爽约，该号不退不换；
                    </p>
                    <p>
                        3.【退号】在
                        {{ orderInfo.quitTime }}
                        前可在线退号 ，逾期将不可办理退号退费；
                    </p>
                    <p>
                        4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
                    </p>
                    <p>
                        5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
                    </p>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
    <!-- 展示支付二维码的结构 payment -->
    <el-dialog @close="closeTimer" v-model="dialogVisible" title="微信支付" lock-scroll width="320px">
        <div class="detail_dialog">
            <img :src="imgUrl" alt="wxPayment" />
            <p>请使用微信扫一扫</p>
            <p>扫描二维码支付</p>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Check } from '@element-plus/icons-vue';
import { reqQueryPayState, reqQrcode, reqCancelOrder, reqOrderInfo } from '@/api/user';
import type { PayReslt, OrderResponseData } from '@/api/user/type';
import { useRoute } from 'vue-router';
// @ts-ignore
import { ElNotification, ElMessage } from 'element-plus';
// 生成二维码的插件QRCode
// @ts-ignore
import QRCode from 'qrcode';

let $route = useRoute();
let orderInfo = ref<any>({});
// 控制微信支付弹窗显示与隐藏
let dialogVisible = ref<boolean>(false);
let imgUrl = ref<string>('');
// 存储定时器
let timer = ref<any>()
onMounted(() => {
    getOrderInfo()
});
// 获取订单详情的数据
const getOrderInfo = async () => {
    let { code, data }: OrderResponseData = await reqOrderInfo($route.query.orderId as string);
    if (code) {
        orderInfo.value = data
    }

}
// 取消订单  (订单状态有三种 orderStatus  -1  取消预约  0 预约但是没有支付  1 支付成功)
const cancel = async () => {
    let { code } = await reqCancelOrder($route.query.orderId as string)
    if (code === 200) {
        ElNotification({
            title: '通知',
            message: '取消预约成功',
            type: 'success',
        });
        getOrderInfo();
    } else {
        ElNotification({
            title: '通知',
            message: '取消预约失败',
            type: 'error',
        })
    }
}
// 支付订单
const payment = async () => {
    let { code, data, message } = await reqQrcode($route.query.orderId as string);
    if (code === 200) {
        // 根据服务器返回二维码信息生成二维码图片
        imgUrl.value = await QRCode.toDataURL(data.codeUrl);
        dialogVisible.value = await true;

        // 询问服务器当前这笔交易的支付结果
        // 只要二维码查来:需要每隔几秒询问服务器是否支付成功
        timer.value = setInterval(async () => {
            let result: PayReslt = await reqQueryPayState($route.query.orderId as string);
            if (result.data) {
                dialogVisible.value = false;
                ElMessage({
                    message: result.message,
                    type: 'success'
                });
                // 清除定时器
                clearInterval(timer.value);
                getOrderInfo()
            }
        }, 2000)
    } else {
        ElMessage({
            message: message,
            type: 'error'
        })
    }
}
// 对话框右上角关闭的叉子的回调
const closeTimer = () => {
    clearInterval(timer.value);
}
</script>
<style scoped lang="scss">
.detail_container {
    .detail_container-card {
        font-size: 24px;
    }

    .detail_container-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .contentTag {
            span {
                line-height: 24px;
            }

            .elIcon {
                vertical-align: text-bottom;
            }
        }

        .contentRight {
            display: flex;

            img {
                width: 50px;
                height: 50px;
                margin-right: 6px;
            }

            .text {
                font-size: 14px;
                display: flex;
                flex-direction: column;

                span {
                    margin-bottom: 6px;
                }
            }
        }
    }

    .detail_container-bottom {
        margin-top: 16px;

        .el-descriptions {
            margin-bottom: 16px;
        }

        .bottomRight {
            .bottomRight-title {
                font-size: 18px;
            }

            p {
                margin-bottom: 10px;
                line-height: 24px;
            }
        }
    }
}

.detail_dialog {
    text-align: center;

    p {
        margin: 10px;
    }
}

@media (max-width:1280px) {
    .detail_container {
        .detail_container-bottom {
            .el-descriptions {
                span {
                    font-size: 12px !important;
                }
            }

            .cell-item {
                white-space: nowrap;
                font-size: 12px !important;
            }

            .bottomRight {

                .bottomRight-title {
                    font-size: 16px;
                }

                p {
                    font-size: 14px;
                }
            }
        }
    }
}

@media (max-width:768px) {
    .detail_container {
        .detail_container-card {
            font-size: 18px;
        }

        .detail_container-content {
            flex-direction: column;
            align-items: start;

            .el-tag {
                margin-bottom: 10px;
            }
        }

        .detail_container-bottom {

            .bottomRight {
                margin-top: 16px;
            }
        }
    }
}
</style>